<template>
	<div id="app">
		<!-- <Header /> -->
		<Nav />
		<router-view />
		<Footer />
	</div>
</template>
<script>
import Header from "./components/Header";
import Nav from "./components/Nav";
import Footer from "./components/Footer"
export default {
	components: {
		Header,
		Nav,
		Footer
	},
	// data() {
	//    return {
	//      currentScreenSize: 'desktop'
	//    };
	//  },
	//  created() {
	//    this.updateScreenSize();
	//    window.addEventListener('resize', this.updateScreenSize);
	//  },
	//  destroyed() {
	//    window.removeEventListener('resize', this.updateScreenSize);
	//  },
	//  methods: {
	//    updateScreenSize() {
	//      const isMobile = window.innerWidth <= 768;
	//   console.log('isMobile',isMobile)
	//   // alert(isMobile)
	//      this.currentScreenSize = isMobile ? 'mobile' : 'desktop';
	//    }
	//  },
	//  watch: {
	//    currentScreenSize(newSize) {
	//      const mobileRoutes = ['/Board'];
	//      const desktopRoutes = ['/'];
	//   console.log('newSize',newSize)
	//      if (newSize === 'mobile') {
	//        // 当屏幕小于768px时，如果当前是desktop-page则跳转到mobile-page
	//        if (this.$route.path === desktopRoutes[0]) {
	//          this.$router.push(mobileRoutes[0]);
	//        }
	//      } else {
	//        // 当屏幕大于等于768px时，如果当前是mobile-page则跳转到desktop-page
	//        if (this.$route.path === mobileRoutes[0]) {
	//          this.$router.push(desktopRoutes[0]);
	//        }
	//      }
	//    }
	//  }
};
</script>
<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
}

.el-tabs__item:hover {
	color: #b80101 !important;
	cursor: pointer;
}

.el-tabs__item.is-active {
	color: #b80101 !important;
}

.el-tabs__content {
	min-height: 377px !important;
}

.el-tabs__active-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	background-color: #b80101 !important;
	z-index: 1;
	transition: transform .3s cubic-bezier(.645, .045, .355, 1);
	list-style: none;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
	color: #fff !important;
	background-color: #d0131c !important;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item {
	width: 158px !important;
	text-align: center;
	font-size: 20px;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
	color: #fff !important;
	background-color: #d0131c !important;
	border-right-color: #d0131c !important;
	border-left-color: #d0131c !important;
}

.el-radio__input.is-checked .el-radio__inner {
	border-color: #d0131c !important;
	background: #d0131c !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	border-color: #d0131c !important;
	background: #d0131c !important;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
	color: #d0131c !important;
}

.el-radio.is-bordered.is-checked {
	border-color: #d0131c !important;
}

.el-radio__input.is-checked+.el-radio__label {
	color: #d0131c !important;
}

.el-button--primary:focus,
.el-button--primary:hover {
	background: #d0131c !important;
	border-color: #d0131c !important;
	color: #FFF;
}

.el-button--primary:focus,
.el-button--primary {
	background: #d0131c !important;
	border-color: #d0131c !important;
	color: #FFF;
}

.el-button:focus,
.el-button:hover {
	color: #fff !important;
	border-color: #d0131c !important;
	background-color: #d0131c !important;
}

.el-select .el-input__inner {
	height: 28px !important;
}

.el-input__icon {
	line-height: 28px !important;
}

.el-pagination {
	white-space: nowrap;
	padding: 24px 5px !important;
	color: #303133;
	font-weight: 700;
	margin: 0 auto;
	display: table;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
	/* background-color: #d0131c !important; */
	/* color: #409EFF; */
	color: #fff !important;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
	/* color: #fff !important; */
	/* background-color: #d0131c !important; */
}

.el-message-box {
	width: 530px !important;
}
</style>